<template>
  <div class="management-page">
    <div class="management-container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1>管理中心</h1>
        <p class="page-subtitle">管理您的试题、比赛和作业</p>
      </div>

      <!-- 试题管理模块 -->
      <div class="management-section">
        <div class="section-header">
          <div class="section-icon">📝</div>
          <h2>试题管理</h2>
        </div>
        
        <div class="cards-grid">
          <!-- 我的试题 -->
          <div class="management-card" @click="navigateTo('/my-questions')">
            <div class="card-icon green">
              <div class="icon-content">📋</div>
            </div>
            <div class="card-title">我的试题</div>
            <div class="card-description">管理我创建的试题</div>
          </div>

          <!-- 别人共享给我的试题 -->
          <div class="management-card" @click="navigateTo('/received-questions')">
            <div class="card-icon green">
              <div class="icon-content">⭐</div>
            </div>
            <div class="card-title">别人共享给我的试题</div>
            <div class="card-description">查看他人分享的试题</div>
          </div>
        </div>
      </div>

      <!-- 比赛/作业管理模块 -->
      <div class="management-section">
        <div class="section-header">
          <div class="section-icon">🏆</div>
          <h2>比赛/作业管理</h2>
        </div>
        
        <div class="cards-grid">
          <!-- 团队赛 -->
          <div class="management-card" @click="navigateTo('/team-contests')">
            <div class="card-icon blue">
              <div class="icon-content">🚀</div>
            </div>
            <div class="card-title">团队赛</div>
            <div class="card-description">创建和管理团队比赛</div>
          </div>

          <!-- 布置作业 -->
          <div class="management-card" @click="navigateTo('/assign-homework')">
            <div class="card-icon blue">
              <div class="icon-content">💡</div>
            </div>
            <div class="card-title">布置作业</div>
            <div class="card-description">为学生布置编程作业</div>
          </div>
        </div>
      </div>


    </div>
  </div>
</template>

<script>
import logger from '../utils/logger.js'

export default {
  name: 'ManagementCenter',
  data() {
    return {
    }
  },
  
  methods: {
    navigateTo(path) {
      logger.log('🎯 [Management] 导航到:', path);
      
      // 针对"我的试题"特殊处理，跳转到我的题目管理页面
      if (path === '/my-questions') {
        logger.log('🎯 [Management] 跳转到我的题目页面');
        this.$router.push('/my-questions');
        return;
      }
      

      // 针对"别人共享给我的试题"页面
      if (path === '/received-questions') {
        logger.log('🎯 [Management] 跳转到别人共享给我的试题页面');
        this.$router.push('/received-questions');
        return;
      }
      
      // 针对"布置作业"页面
      if (path === '/assign-homework') {
        logger.log('🎯 [Management] 跳转到布置作业页面');
        this.$router.push('/assign-homework');
        return;
      }
      
      // 其他路径的处理（暂时显示提示）
      if (this.$message && this.$message.info) {
        this.$message.info(`功能开发中: ${path}`);
      } else {
        alert(`功能开发中: ${path}`);
      }
    }
  }
}
</script>

<style scoped>
.management-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.management-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.page-header h1 {
  font-size: 36px;
  color: #2c3e50;
  margin: 0 0 10px 0;
  font-weight: 700;
}

.page-subtitle {
  font-size: 16px;
  color: #7f8c8d;
  margin: 0;
}

/* 管理模块 */
.management-section {
  margin-bottom: 40px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  padding: 30px;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #ecf0f1;
}

.section-icon {
  font-size: 28px;
  margin-right: 15px;
}

.section-header h2 {
  font-size: 24px;
  color: #2c3e50;
  margin: 0;
  font-weight: 600;
}

/* 卡片网格 */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
  justify-content: center;
}

/* 试题管理模块特殊样式 - 两个卡片居中显示 */
.management-section:first-of-type .cards-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.management-section:first-of-type .management-card {
  flex: 0 0 300px;
  max-width: 350px;
}

.management-card {
  background: white;
  border: 2px solid #ecf0f1;
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.management-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s;
}

.management-card:hover::before {
  left: 100%;
}

.management-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  border-color: #3498db;
}

.card-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  transition: transform 0.3s ease;
}

.management-card:hover .card-icon {
  transform: scale(1.1);
}

.card-icon.green {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: white;
}

.card-icon.blue {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;
}

.card-description {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.5;
}



/* 响应式设计 */
@media (max-width: 768px) {
  .management-page {
    padding: 10px;
  }
  
  .management-container {
    padding: 0;
  }
  
  .page-header {
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .page-header h1 {
    font-size: 28px;
  }
  
  .management-section {
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  /* 移动端试题管理模块调整 */
  .management-section:first-of-type .cards-grid {
    flex-direction: column;
    align-items: center;
  }
  
  .management-section:first-of-type .management-card {
    flex: none;
    width: 100%;
    max-width: 400px;
  }
  
  .management-card {
    padding: 20px 15px;
  }
  
  .card-icon {
    width: 60px;
    height: 60px;
    font-size: 28px;
  }
  

}

@media (max-width: 480px) {
  .section-header {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  
  .section-icon {
    margin-right: 0;
  }
  

}
</style> 